<template>
    <div class="insurance">
        <div class="card-list">
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> -->
                    <div v-for="(item,index) in listSource" :key="index" class="card">
                        <div class="card-top" :style="{backgroundImage: 'url(' + imgUrl1 + ')' }">
                            <div class="card-title">
                                <div>{{item.company_name}}</div>
                                <div class="">{{item.goods_name}}</div>
                            </div>
                            <div class="single-line">地址：{{item.company_address}}</div>
                            <div class="single-line">联系电话：{{item.company_mobile}}</div>
                            <div class="single-line">合同时间：{{item.start_time_text}} ~ {{item.over_time_text}}</div>
                            <div class="single-line">价格：{{item.price}}</div>
                        </div>
                        <div class="card-btn" :style="{backgroundImage: 'url(' + imgUrl2 + ')' }">
                            <div @click="goOrderPage(index)" v-if="button1">订单信息</div>
                            <div @click="goStaffList(index)" v-if="button2">配置员工</div>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
    export default {
        name: "kfInsurance",
        data() {
            return {
                listSource: [],
                page: 1,
                limit: 10,
                isLoading: false,
                imgUrl1: require('../../../assets/img/card_bg1.png'),
                imgUrl2: require('../../../assets/img/card_bg2.png'),
                list: [],
                loading: false,
                finished: false,
                button1: false,
                button2: false,
            }
        },
        methods: {
            onRefresh() {
                this.page = 1;
                this.onLoad("refresh");
            },
            onLoad(type) {
                let params = {
                    limit: this.limit,
                    page: this.page,
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    token: localStorage.getItem('token'),
                    cate_id: 1,
                };
                this.$post("/api/customer/index", params)
                    .then(res => {
                        if (res.code == 1) {
                            if (type == "refresh") {
                                this.listSource = res.data.dataList;
                                this.isLoading = false;
                                this.finished = false;
                            } else {
                                this.listSource = this.listSource.concat(
                                    res.data.dataList
                                );
                            }
                            this.loading = false;
                            this.page++;
                            if (res.data.dataList.length < this.limit) {
                                this.finished = true;
                            }
                        }
                    })
                    .catch(err => {
                    });
            },


            goOrderPage(index) {
                let id = this.listSource[index].id
                this.$router.push(`/kfOrderInfo?id=${id}`)
            },
            goStaffList(index) {
                let id = this.listSource[index].id
                let goods_id = this.listSource[index].goods_id
                this.$router.push(`/kfStaffList?id=${id}&goodsId=${goods_id}`)
            },
            // onLoad() {
            //     // 异步更新数据
            //     setTimeout(() => {
            //         for (let i = 0; i < 10; i++) {
            //             this.list.push(this.list.length + 1);
            //         }
            //         // 加载状态结束
            //         this.loading = false;

            //         // 数据全部加载完成
            //         if (this.list.length >= 40) {
            //             this.finished = true;
            //         }
            //     }, 500);
            // }
        },
        created() {
            this.button1 = this.$queryMenu('Customer/order');       //订单信息
            this.button2 = this.$queryMenu('Customer/deploy');          //分配负责人
        }
    }
</script>

<style scoped lang="less">
    .card-list {
        padding: 16px;
        padding-top: 0;

        .card {
            /*height: 200px;*/
            position: relative;
            color: #fff;
            margin-bottom: 15px;

            .card-top {
                display: flex;
                flex-wrap: wrap;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                padding: 20px 30px;
                border-radius: 8px 8px 0 0 ;

                .card-title {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    margin-bottom: 13px;

                    > div:nth-of-type(1) {
                        font-size: 16px;
                        font-weight: bold;
                        flex: 1;
                        padding-right: 10px;
                    }

                    > div:nth-of-type(2) {
                        font-size: 12px;
                        padding-left: 10px;
                    }
                }

                .mtext-line {
                    width: 50%;
                    font-size: 13px;
                    flex-wrap: wrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .single-line {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    font-size: 13px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;

                    margin-bottom: 10px;
                }

                > .mtext-line:not(:last-child) {
                    margin-bottom: 10px;
                }
            }

            .card-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 60px;
                padding-left: 0;
                bottom: 8px;
                background-size: 100% 100%;
                background-repeat: no-repeat;

                div {
                    height: 35px;
                    width: 135px;
                    margin: 0 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #fff;
                    opacity: 0.8;
                    color: #366cb3;
                    border-radius: 5px;
                    font-size: 14px;
                }
            }
        }
    }
</style>